<template>
  <!-- 信息录入 -->
  <div class="box">
    <el-form
      label-width="100px"
      size="small"
      :inline="true"
      ref="inforForm"
      :model="form"
      :rules="rules"
    >
      <section class="addInfor">
        <div>
          <el-form-item label="购房人姓名" prop="buyName">
            <el-input v-model="form.buyName"></el-input>
          </el-form-item>
          <el-form-item label="身份证号码" prop="buyCard">
            <el-input v-model="form.buyCard"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="buyPhone">
            <el-input v-model="form.buyPhone"></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="售房人姓名" prop="basicBorrowerName">
            <el-input v-model="form.basicBorrowerName"></el-input>
          </el-form-item>
          <el-form-item label="身份证号码" prop="basicBorrowerCard">
            <el-input v-model="form.basicBorrowerCard"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="basicBorrowerPhone">
            <el-input v-model="form.basicBorrowerPhone"></el-input>
          </el-form-item>
          <el-form-item label="婚姻状况" prop="basicBorrowerMarriage">
            <el-select v-model="form.basicBorrowerMarriage">
              <el-option
                v-for="item in Marriage"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div v-if="showMate">
          <el-form-item label="配偶姓名" prop="basicBorrowerMateName">
            <el-input v-model="form.basicBorrowerMateName"></el-input>
          </el-form-item>
          <el-form-item label="身份证号码" prop="basicBorrowerMateCard">
            <el-input v-model="form.basicBorrowerMateCard"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="basicBorrowerMatePhone">
            <el-input v-model="form.basicBorrowerMatePhone"></el-input>
          </el-form-item>
        </div>
      </section>
      <section class="addInfor">
        <div>
          <el-form-item label="抵押人姓名" prop="pledgeName">
            <el-input v-model="form.pledgeName"></el-input>
          </el-form-item>
          <el-form-item label="身份证号码" prop="pledgeCard">
            <el-input v-model="form.pledgeCard"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="pledgePhone">
            <el-input v-model="form.pledgePhone"></el-input>
          </el-form-item>
          <el-form-item label="不动产地址" prop="pledgeHouseAddress">
            <el-input v-model="form.pledgeHouseAddress"></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="产权号" prop="pledgeHouseNumber">
            <el-input v-model="form.pledgeHouseNumber"></el-input>
          </el-form-item>
          <el-form-item label="所属区域" prop="pledgeHouseDistrict">
            <el-input v-model="form.pledgeHouseDistrict"></el-input>
          </el-form-item>
          <el-form-item label="小区名字" prop="pledgeHouseName">
            <el-input v-model="form.pledgeHouseName"></el-input>
          </el-form-item>
          <el-form-item label="面积（m²）" prop="pledgeHouseArea">
            <el-input v-model="form.pledgeHouseArea"></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="成交价" prop="pledgeOneBalance">
            <el-input v-model="form.pledgeOneBalance"></el-input>
          </el-form-item>
          <el-form-item label="贷款银行" prop="pledgeOneBank">
            <el-input v-model="form.pledgeOneBank"></el-input>
          </el-form-item>
          <el-form-item class="te" label="余贷款金额" prop="surplusMoney">
            <el-input type="number" v-model="form.surplusMoney">
              <template slot="prepend">小写</template>
              <template slot="append">（万元）</template>
            </el-input>
          </el-form-item>
        </div>
      </section>
    </el-form>
  </div>
</template>

<script>
import { saveOrder } from "../../../src/assets/js/api";
export default {
  name: "Information",
  data() {
    return {
      form: {
        buyName: "",
        buyCard: "",
        buyPhone: "",
        basicBorrowerName: "",
        basicBorrowerCard: "",
        basicBorrowerPhone: "",
        basicBorrowerMarriage: "未婚"
      },
      Marriage: [
        { value: "未婚", label: "未婚" },
        { value: "已婚", label: "已婚" }
      ],
      rules: {
        buyName: [
          { required: true, message: "请输入申请人姓名", trigger: "blur" }
        ],
        buyCard: [
          { required: true, message: "请填写证件号码", trigger: "blur" },
          {
            pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
            message: "证件号码格式有误！",
            trigger: "blur"
          }
        ],
        buyPhone: [
          { required: true, message: "请输入手机号码", trigger: "change" },
          {
            validator: function(rule, value, callback) {
              if (/^1[345789]\d{9}$/.test(value) == false) {
                callback(new Error("手机号格式错误"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        basicBorrowerName: [
          { required: true, message: "请输入申请人姓名", trigger: "blur" }
        ],
        basicBorrowerCard: [
          { required: true, message: "请填写证件号码", trigger: "blur" },
          {
            pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
            message: "证件号码格式有误！",
            trigger: "blur"
          }
        ],
        basicBorrowerPhone: [
          { required: true, message: "请输入手机号码", trigger: "change" },
          {
            validator: function(rule, value, callback) {
              if (/^1[345789]\d{9}$/.test(value) == false) {
                callback(new Error("手机号格式错误"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ]
      }
    };
  },
  computed: {
    showMate: function() {
      if (this.form.basicBorrowerMarriage != "已婚") {
        return false;
      } else {
        return true;
      }
    }
  },
  methods: {
    //表单验证
    validataForm(orderNumber) {
      this.$refs["inforForm"].validate(valid => {
        if (valid) {
          this.form.orderNumber = orderNumber;
          let prductId = parseInt(sessionStorage.getItem("prductId"));
          this.form.productId = prductId;
          saveOrder(this.form).then(res => {
            if (res.code == 200) {
              this.$message.success(res.message);
              sessionStorage.setItem("orderNumber", orderNumber);
              this.$router.replace({ path: "/Index/EntertMort" });
            } else {
              this.$message.error(res.message);
            }
          });
        } else {
          this.$message.error("请检查输入的格式");
          return false;
        }
      });
    }
  }
};
</script>
<style scoped type="less">
.box {
  line-height: 40px;
}
.addInfor {
  text-align: left;
  border: 1px solid rgba(238, 238, 238, 1);
  border-radius: 8px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-top: 20px;
  padding: 10px 10px 10px 10px;
  line-height: 55px;
}
.addInfor ::v-deep.el-form-item__content {
  width: 100%;
  vertical-align: middle;
}
.addInfor ::v-deep.el-date-editor.el-input {
  width: 100%;
}
.addInfor ::v-deep.el-form-item--small.el-form-item {
  margin-bottom: 0;
  margin-right: 0;
  box-sizing: border-box;
  width: 25%;
  position: relative;
  padding-left: 100px;
}
.addInfor ::v-deep.el-form-item__label {
  position: absolute;
  left: 0;
  line-height: 55px;
}
.addInfor ::v-deep .el-input-group__prepend {
  padding: 0 10px;
}
.addInfor ::v-deep .el-input-group__append {
  padding: 0 0;
}
.addInfor .te ::v-deep .el-input__inner {
  padding: 0;
  text-align: center;
  line-height: 30px;
}
</style>
